<template>
	<view class="record">
		<uv-navbar placeholder autoBack bgColor="#CA1C1D">
			<template v-slot:left>
				<view class="left_slot">
					<image src="@/static/images/back.png"></image>
				</view>
			</template>
			<template v-slot:center>
				<view class="nav_title">酒库记录</view>
			</template>
		</uv-navbar>
		<view class="header">
			<view class="name">商品名称</view>
			<view class="time">时间</view>
			<view class="reason">原因</view>
			<view class="value">出入库</view>
		</view>
		<scroll-view scroll-y class="scroll_view" @scrolltolower="loadmore">
			<view class="list">
				<view class="item" v-for="item in _this.list">
					<view class="name">{{item.product.name}}</view>
					<view class="time">{{item.created_at}}</view>
					<view class="reason">{{item.type_name}}</view>
					<view class="value" :class="item.value>0?'add':'reduce'">{{item.value}}</view>
				</view>
			</view>
			<uv-load-more :status="_this.loadmore_status" line @loadmore="loadmore" />
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		underwriteLog
	} from "@/request/api";
	import useList from "@/hooks/useList.js";
	const {
		_this
	} = useList();
	import {
		ref,
		shallowRef
	} from "vue";

	const getList = async () => {
		let {
			list
		} = await underwriteLog({
			page: _this.page,
			limit: _this.limit
		});
		_this.last_page = list.last_page;
		list = list.list;
		_this.list = _this.page == 1 ? list : [..._this.list, ...list];
		_this.loadmore_status = _this.last_page == _this.page ? 'nomore' : 'loadmore';
	};
	getList();
	const loadmore = () => {
		if (_this.page >= _this.last_page) return;
		_this.page++;
		getList();
	};
</script>

<style scoped lang="scss">
	.record {
		height: calc(100vh - var(--window-top) - var(--window-bottom));

		.left_slot {
			image {
				width: 43rpx;
				height: 36rpx;
			}
		}

		.nav_title {
			color: #F5F5F5;
			font-size: 36rpx;
		}

		.header {
			height: 88rpx;
			color: #333333;
			font-size: 28rpx;
			font-weight: bold;
			border-bottom: 1px solid #EEEEEE;
			padding: 0rpx 30rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.name {
				width: 150rpx;
			}

			.time {
				width: 300rpx;
			}

			.reason {
				width: 150rpx;
			}

			.value {
				width: 90rpx;
			}
		}

		.scroll_view {
			height: calc(100vh - var(--window-top) - var(--window-bottom) - #{$navBarHeight} - 88rpx);

			.list {
				padding: 0rpx 30rpx;
				box-sizing: border-box;

				.item {
					height: 90rpx;
					color: #333333;
					font-size: 24rpx;
					border-bottom: 1px solid #EEEEEE;
					display: flex;
					justify-content: space-between;
					align-items: center;

					&>view {
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}

					.name {
						width: 150rpx;
						font-weight: bold;
					}

					.time {
						width: 300rpx;
					}

					.reason {
						width: 150rpx;
					}

					.value {
						width: 90rpx;
						text-align: right;
						font-weight: bold;

						&.add {
							color: #CA1C1D;
						}

						&.reduce {
							color: #76AC46;
						}
					}
				}
			}
		}
	}
</style>